<template>
  <s-layout
    title="拾亲"
    navbar="inner"
    tabbar="/pages/message/matchmaking"
    color="#000000"
    :onShareAppMessage="true"
    :leftIcon="''"
    :bgStyle="pageStyle.background"
    :navbarStyle="template.style?.navbar"
    :showFloatButton="true"
    :showLeftHome="false"
    showAddIcon
    main-background="#F5F5F5"
  >
    <scroll-view scroll-y
                 :style="{
                  height: `calc(100vh - ${scrollView_height}px)`
                 }"
    >
      <view class="flex flex-column align-center">
        <!-- 头部轮播图 -->
        <carousel-map></carousel-map>
        <view class="mt_15 wh_674 hW_42 fs_24 fw_500 color_FF4206 flex align-center justify-center"
              style="background: #ffedc7;border-radius: 20rpx"
              @click.stop="goToPath"
        >
          {{ page.nowInfo }} 第{{ getWeek() }}周
        </view>
        <!-- 姓氏文化 -->
        <family-name ref="familyName"></family-name>
        <view class="hW_15"></view>
        <!-- 家庭和家谱 -->
        <family-tree
          :total="totalNumberOfGenealogies"
          :familyTotal="totalNumberOfFamily"
          :currentMode="currentMode.mode"
          @changeMode="changeMode"
        ></family-tree>
        <!-- 家庭列表 -->
        <view class="familyMembers_allList flex flex-column align-center" v-if="currentMode.mode == 'family'">
          <family-management v-for="(item,index) in familyList" :info="item" :key="index" :index="index"
                             :length="familyList.length" v-if="!!isLogin && familyList.length > 0"></family-management>
          <family-management :info="selectedFamilyDetail.info" :index="0" :length="1" :is_login="false"
                             v-if="!isLogin"></family-management>
          <view class="mt_30 mb_30 flex align-center justify-center">
            <view class="genealogy_bottomBtn flex align-center justify-center mr_40" @click.stop="openAddFamilyPopup">
              <text class="genealogy_bottomBtn_text fs_24 fw_500 color_9F9F9F" style="opacity: 0.8;">加入家庭</text>
            </view>
            <view class="genealogy_bottomBtn flex align-center justify-center ml_40" @click.stop="openFamilyPopup">
              <text class="genealogy_bottomBtn_text fs_24 fw_500 color_9F9F9F" style="opacity: 0.8;">新建家庭</text>
            </view>
          </view>
        </view>
        <!-- 家谱列表 -->
        <view class="genealogy_list flex flex-column align-center justify-between"
              v-if="currentMode.mode == 'genealogy'">
          <template v-if="genealogyList.length > 0">
            <view class="genealogy_posters flex flex-column align-center justify-around"
                  @click.stop="goGenealogicalDetails(item)"
                  v-for="(item,index) in genealogyList" :key="index" :class="index == 0 ? '' : 'mt_25'"
                  :style="{
                  borderRadius: index == 0 ? '0 0 8rpx 8rpx':'8rpx',
                  marginTop:'-2rpx'
                }"
                  style="width: 100%;"
            >
              <view class="flex align-center w-100" style="padding: 50rpx 0 0 0">
                <view class="genealogy_posters_line" :style="{
                        background:item.is_init == 1 && item.is_own == 1 ? '#FC6F6F':item.is_init != 1 &&item.is_own == 1 ? '#A5FC6F':'none'
                      }">
                </view>
                <image class="genealogy_posters_images ml_30"
                       :src="`${IMG_URL}/index/genealogicalShowIcon.png`"></image>
                <view class="genealogy_posters_info flex flex-column ml_50">
                  <view class="genealogy_posters_info_name flex align-center">
                    <text class="genealogy_posters_info_name_text">{{ item.title }}</text>
                    <view class="flex align-center ml_20 wh_150" @click.stop="goGenealogicalManagement(item.id)">
                      <text class="fs_22 fw_400 color_FFFFFF" style="white-space: nowrap">设置</text>
                      <image :src="`${IMG_URL}/index/family_edit_icon.png`" class="ml_4"
                             style="width: 25rpx;height: 25rpx;"
                      ></image>
                    </view>
                  </view>
                  <view class="genealogy_posters_info_createdBy" style="margin: -5rpx 0 8rpx 0">
                    <text class="genealogy_posters_info_createdBy_text">家谱号：{{ item.code }}</text>
                  </view>
                  <view class="genealogy_posters_info_createdBy" style="margin: -5rpx 0 8rpx 0">
                    <text class="genealogy_posters_info_createdBy_text">发起人：{{ item.initiator }}</text>
                  </view>
                  <view class="genealogy_posters_info_time" style="margin: -5rpx 0 8rpx 0">
                    <text class="genealogy_posters_info_time_text">
                      {{ dayjs(item.add_time * 1000).format('YYYY年MM月DD日') }}创建
                    </text>
                  </view>
                </view>
              </view>
              <view class="flex align-center justify-center">
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  人数{{ item.total_count }}
                </view>
                <view class="fs_24 fw_500 ml_50 mr_50"
                      style="color: rgba(255,255,255,0.8)"
                >
                  男{{ item.man_count }}
                </view>
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  女{{ item.women_count }}
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="genealogy_posters flex flex-column align-center justify-around"
                  @click.stop="goGenealogicalDetails()"
                  :style="{
                  borderRadius:'0 0 8rpx 8rpx',
                  marginTop:'-2rpx'
                }"
                  style="width: 100%;"
            >
              <view class="flex align-center w-100" style="padding: 50rpx 0 0 0">
                <image class="genealogy_posters_images ml_30"
                       :src="`${IMG_URL}/index/genealogicalShowIcon.png`"></image>
                <view class="genealogy_posters_info flex flex-column ml_50">
                  <view class="genealogy_posters_info_name flex align-center">
                    <text class="genealogy_posters_info_name_text">{{ '我的家谱' }}</text>
                    <view class="flex align-center ml_20 wh_150">
                      <text class="fs_22 fw_400 color_FFFFFF" style="white-space: nowrap">设置</text>
                      <image :src="`${IMG_URL}/index/family_edit_icon.png`" class="ml_4"
                             style="width: 25rpx;height: 25rpx;"
                      ></image>
                    </view>
                  </view>
                  <view class="genealogy_posters_info_createdBy" style="margin: -5rpx 0 8rpx 0">
                    <text class="genealogy_posters_info_createdBy_text">家谱号：{{ '66666GT' }}</text>
                  </view>
                  <view class="genealogy_posters_info_createdBy" style="margin: -5rpx 0 8rpx 0">
                    <text class="genealogy_posters_info_createdBy_text">发起人：{{ '未登录' }}</text>
                  </view>
                  <view class="genealogy_posters_info_time" style="margin: -5rpx 0 8rpx 0">
                    <text class="genealogy_posters_info_time_text">
                      {{ dayjs(new Date().getTime()).format('YYYY年MM月DD日') }}创建
                    </text>
                  </view>
                </view>
              </view>
              <view class="flex align-center justify-center">
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  人数{{ 10 }}
                </view>
                <view class="fs_24 fw_500 ml_50 mr_50"
                      style="color: rgba(255,255,255,0.8)"
                >
                  男{{ 5 }}
                </view>
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  女{{ 5 }}
                </view>
              </view>
            </view>
          </template>
          <view class="mt_30 mb_30 flex align-center justify-center">
            <view class="genealogy_bottomBtn flex align-center justify-center mr_40" @click.stop="joinFamilyTree">
              <text class="genealogy_bottomBtn_text fs_24 fw_500 color_9F9F9F" style="opacity: 0.8;">加入家谱</text>
            </view>
            <view class="genealogy_bottomBtn flex align-center justify-center ml_40" @click.stop="newFamilyTree">
              <text class="genealogy_bottomBtn_text fs_24 fw_500 color_9F9F9F" style="opacity: 0.8;">新建家谱</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 家庭消息申请类型弹窗 -->
    <s-apply-family-member-ship @agreeToJoin="agreeToJoin"
                                @toggle="agreeToJoin"
                                @agreeToJoinGenealogy="agreeToJoinGenealogy"
    >
    </s-apply-family-member-ship>
    <!-- 家庭消息邀请类型弹窗 -->
    <s-apply-family-invitation :list="page.list"
                               @agreeToJoin="agreeToJoin"
                               @toggle="agreeToJoin"
                               @agreeToJoinGenealogy="agreeToJoinGenealogy"
    >
    </s-apply-family-invitation>

    <!--    &lt;!&ndash; 分享标 &ndash;&gt;-->
    <!--    &lt;!&ndash; #ifdef APP-PLUS &ndash;&gt;-->
    <!--    <s-share-floating-window ref="shareFloatingWindow" v-if="!!isLogin" :index="1"></s-share-floating-window>-->
    <!--    &lt;!&ndash; #endif &ndash;&gt;-->
    <!--    &lt;!&ndash; #ifndef APP-PLUS &ndash;&gt;-->
    <!--    <s-share-floating-window ref="shareFloatingWindow" v-if="!!isLogin" :index="1"></s-share-floating-window>-->
    <!--    &lt;!&ndash; #endif &ndash;&gt;-->

    <!-- 添加好友弹窗 -->
    <s-friend-new :applyForFamilyMembership="page.userNewList" @agreeToJoin="agreeToJoin"></s-friend-new>

    <s-login-popup ref="loginPopup" @confirm="loginConfirm"></s-login-popup>

    <!-- #ifdef APP-PLUS -->
    <s-update-popup ref="updatePopup"></s-update-popup>
    <!-- #endif -->

    <!-- #ifdef H5 -->
    <view v-if="page.showShareGuide"
          class="guide-wrap"
          @click.stop="page.showShareGuide = false"
    >
      <image
        class="guide-image"
        :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
      ></image>
    </view>
    <!-- #endif -->
  </s-layout>
</template>

<script setup>
  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
  import sheep from '@/sheep';
  import CarouselMap from '@/pages/message/components/carouselMap.vue';
  import FamilyName from '@/pages/message/components/familyName.vue';
  import FamilyTree from '@/pages/message/components/familyTree.vue';
  import FamilyManagement from '@/pages/message/components/familyManagement.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import dayjs from 'dayjs';
  import { onLoad, onShow, onReady } from '@dcloudio/uni-app';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import SLoginPopup from '@/sheep/components/s-login-popup/s-login-popup.vue';
  import SUpdatePopup from '@/sheep/components/s-update-popup/s-update-popup.vue';
  import { h5_url } from '@/sheep/config';

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {
    },
  });

  const pageStyle = reactive({
    background: { color: '#F5F5F5', src: '' },
  });
  const currentMode = reactive({
    mode: 'genealogy',
  });
  const selectedFamilyDetail = reactive({
    info: {},
  });

  const template = computed(() => sheep.$store('app').template.user);
  const bind_id = computed(() => sheep.$store('AI').bind_id);
  const bind_family_id = computed(() => sheep.$store('AI').bind_family_id);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const scrollView_height = computed(() => {
    let height = 0;
    height = Number(sheep.$platform.device.statusBarHeight) + Number(sheep.$store('system_info').tabbar_height) + 44;
    return height;
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  const familyList = computed(() => sheep.$store('family').list);
  const genealogyList = computed(() => sheep.$store('family').genealogyList);
  const unread_family = computed(() => sheep.$store('family').unread_family);
  const unread_genealogy = computed(() => sheep.$store('family').unread_genealogy);
  const unread_user = computed(() => sheep.$store('family').unread_user);
  const totalNumberOfFamily = computed(() => {
    if (!isLogin.value) {
      return 10;
    }
    if (familyList.value.length > 0) {
      let total = 0;
      familyList.value.forEach(item => {
        total += item.member_count;
      });
      return total;
    } else {
      return 0;
    }
  });
  const totalNumberOfGenealogies = computed(() => {
    if (!isLogin.value) {
      return 10;
    }
    if (genealogyList.value.length > 0) {
      let total = 0;
      genealogyList.value.forEach(item => {
        total += item.total_count;
      });
      return total;
    } else {
      return 0;
    }
  });
  // #ifdef H5
  const userInfo = computed(() => JSON.parse(uni.getStorageSync('user-store')).userInfo);
  // #endif
  // #ifndef H5
  const userInfo = computed(() => sheep.$store('user').userInfo);
  // #endif

  const page = reactive({
    applyForFamilyMembership: [],
    userNewList: [],
    nowInfo: '',
    list: {
      family_id: '',
      genealogy_id: '',
      uid: '',
      type: '',
    },
    // #ifdef H5
    showShareGuide: false,
    // #endif
  });
  const familyName = ref();
  const loginPopup = ref();
  const login = computed(() => sheep.$store('user').isLogin);

  // 获取当前时间 年月日当前时间 农历年月日 星期几 今年第几周
  function nowData() {
    setInterval(() => {
      let date = new Date().getTime();
      // 阳历时间
      let dayjs_date = dayjs(date).format('YYYY年MM月DD日HH:mm:ss');
      // 农历时间
      let lunar_date = calendar.solar2lunar(dayjs(date).format('YYYY'), dayjs(date).format('MM'), dayjs(date).format('DD'));
      let week = dayjs(date).format('dddd');
      // 获取农历时间
      let time = '';
      if (Number(dayjs(date).format('HH')) < 1 && Number(dayjs(date).format('HH')) >= 23) {
        time = '子时';
      } else if (Number(dayjs(date).format('HH')) < 3 && Number(dayjs(date).format('HH')) >= 1) {
        time = '丑时';
      } else if (Number(dayjs(date).format('HH')) < 5 && Number(dayjs(date).format('HH')) >= 3) {
        time = '寅时';
      } else if (Number(dayjs(date).format('HH')) < 7 && Number(dayjs(date).format('HH')) >= 5) {
        time = '卯时';
      } else if (Number(dayjs(date).format('HH')) < 9 && Number(dayjs(date).format('HH')) >= 7) {
        time = '辰时';
      } else if (Number(dayjs(date).format('HH')) < 11 && Number(dayjs(date).format('HH')) >= 9) {
        time = '巳时';
      } else if (Number(dayjs(date).format('HH')) < 13 && Number(dayjs(date).format('HH')) >= 11) {
        time = '午时';
      } else if (Number(dayjs(date).format('HH')) < 15 && Number(dayjs(date).format('HH')) >= 13) {
        time = '未时';
      } else if (Number(dayjs(date).format('HH')) < 17 && Number(dayjs(date).format('HH')) >= 15) {
        time = '申时';
      } else if (Number(dayjs(date).format('HH')) < 19 && Number(dayjs(date).format('HH')) >= 17) {
        time = '酉时';
      } else if (Number(dayjs(date).format('HH')) < 21 && Number(dayjs(date).format('HH')) >= 19) {
        time = '戌时';
      } else if (Number(dayjs(date).format('HH')) < 23 && Number(dayjs(date).format('HH')) >= 21) {
        time = '亥时';
      } else {
        time = '子时';
      }
      page.nowInfo = dayjs_date + ' ' + lunar_date.gzYear + lunar_date.IMonthCn + lunar_date.IDayCn + time + ' ' + week;
    }, 100);
  }

  function getWeek() {
    let date1 = new Date().getTime(); //本日
    let date2 = new Date(dayjs(`${new Date().getFullYear()}-01-01`).format('YYYY')).getTime(); //本年元旦
    let d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
    return Math.floor((d + new Date(dayjs(`${new Date().getFullYear()}-01-01`).format('YYYY')).getDay()) / 7) + 1;
  }

  watch(unread_user, (newVal) => {
    if (!!newVal && newVal.length > 0) {
      page.userNewList = [];
      newVal.forEach(item => {
        page.userNewList.push(item);
      });
    }
  }, { deep: true });

  onLoad(async (options) => {

    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('&');
      console.log(sceneParams);
      for (let i = 0; i < sceneParams.length; i++) {
        options[sceneParams[i].split('=')[0]] = sceneParams[i].split('=')[1];
      }
    }
    // #endif

    if (!!options.id) {
      sheep.$store('AI').setBindId(options.id);
    }

    if (!!options.spid) {
      sheep.$store('AI').setBindId(options.spid);
    }

    if (!!options.fd) {
      if (!isLogin.value) {
        page.list.uid = options.spid;
        page.list.family_id = options.fd;
        page.list.type = 'family';
      } else {
        const { data } = await sheep.$api.family.checkUserInFamily({ family_id: options.fd });
        if (data.is_join != 1) {
          page.list.uid = options.spid;
          page.list.family_id = options.fd;
          page.list.type = 'family';
        }
      }
    }

    if (!!options.gd) {
      if (!isLogin.value) {
        page.list.uid = options.spid;
        page.list.genealogy_id = options.gd;
        page.list.type = 'genealogy';
      } else {
        const { data } = await sheep.$api.genealogy.checkUserInGenealogy({ genealogy_id: options.gd });
        if (data.is_join != 1) {
          page.list.uid = options.spid;
          page.list.genealogy_id = options.gd;
          page.list.type = 'genealogy';
        }
      }
    }


    if (!!isLogin.value) {
      sheep.$store('user').updateUserData();
    }
  });


  onShow(async () => {
    nowData();
    if (!!bind_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindId('');
      }
    }

    if (!!bind_family_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.family.applyFamily({ family_id: bind_family_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindFamilyId('');
      }
    }

    if (!isLogin.value) {
      const { data } = await sheep.$api.family.getNoLoginFamily();
      selectedFamilyDetail.info = data.familys[0];
      // showAuthModal();
    } else {
      await sheep.$store('family').getList();
      await sheep.$store('family').getFamilyTree();
      await sheep.$store('family').getFamilyRemindList();
    }

    nextTick(() => {
      familyName._value.setName();
    });
  });

  onReady(() => {
    // #ifndef H5
    if (!!login.value) {
      if (!userInfo.value.surname || !userInfo.value.daimyo) {
        uni.redirectTo({
          url: '/pages/userData/sex',
        });
        return;
      }
      uni.switchTab({
        url: '/pages/message/genealogy',
      });
    } else {
      uni.switchTab({
        url: '/pages/message/matchmaking',
      });
    }
    // #endif
    // #ifdef H5
    if (!!login.value) {
      if (!userInfo.value.surname || !userInfo.value.daimyo) {
        uni.redirectTo({
          url: '/pages/userData/sex',
        });
        return;
      }
      uni.switchTab({
        url: '/pages/message/genealogy',
      });
    } else {
      uni.switchTab({
        url: '/pages/message/genealogy',
      });
    }
    // #endif

    // #ifndef MP
    uni.$on('showShareGuide', () => {
      // #ifdef H5
      page.showShareGuide = true;
      // #endif
      // #ifdef APP-PLUS
      sheep.$platform.share.shareAPP({
        title: '拾亲',
        desc: '再小的家庭-也要有传承',
        link: `pages/message/matchmaking?id=${userInfo.value.uid}`,
        image: `${h5_url}/static/shiqin_transparent_icon.png`,
      });
      // #endif
    });
    // #endif
    uni.$on('openLoginPopup', () => {
      loginPopup._value.openPopup();
    });
    if (!isLogin.value) {
      // nextTick(() => {
      //   loginPopup._value.openPopup();
      // });
    }
    if (!!isLogin.value) {
      sheep.$store('user').updateUserData();
      // #ifdef H5
      sheep.$platform.share.updateShareInfo({
        title: '拾亲',
        desc: `再小的家庭-也要有传承`,
        link: `${h5_url}/#/pages/message/matchmaking?id=${userInfo.value.uid}`,
        image: `${h5_url}/static/fenxiang_icon.png`,
      });
      // #endif
    }

    uni.$on('settingMode', () => {
      currentMode.mode = 'genealogy';
    });

    if (!!isLogin.value) {
      currentMode.mode = 'genealogy';
    } else {
      currentMode.mode = 'genealogy';
    }
  });

  function changeMode(type) {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    if (currentMode.mode == type) {
      if (type == 'family') {
        sheep.$router.go('/pages/family/familyList');
        return;
      }
      if (type == 'genealogy') {
        sheep.$router.go('/pages/family/genealogicalList');
        return;
      }
      return;
    }
    currentMode.mode = type;
  }

  function openFamilyPopup() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    sheep.$router.go('/pages/family/foundFamily');
  }

  // 加入家庭
  function openAddFamilyPopup() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    sheep.$router.go('/pages/familyPage/joinFamily');
  }

  // 新建家谱
  function newFamilyTree() {
    sheep.$router.go('/pages/genealogy/newFamilyTree');
  }

  // 加入家谱
  function joinFamilyTree() {
    sheep.$router.go('/pages/genealogy/joinFamilyTree');
  }

  // 跳转家谱详情
  async function goGenealogicalDetails(info) {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }

    await uni.showLoading({
      title: '加载中...',
      mask: true,
    });
    // await sheep.$store('family').setGenealogyTree(info.id);
    await uni.hideLoading();
    sheep.$router.go('/pages/genealogy/management', {
      id: info.id,
      name: info.title,
      add_time: info.add_time,
      username: info.initiator,
    });
  }

  function goGenealogicalManagement(id) {
    sheep.$router.go('/pages/genealogy/genealogicalManagement', { id });
  }

  async function agreeToJoin() {
    await sheep.$store('family').getList();
    await sheep.$store('family').getFamilyTree();
    await sheep.$store('family').getFamilyRemindList();
  }

  function goToPath() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    sheep.$router.go('/pages/familyPage/anniversariesList', {
      is_flag: 2,
      index: 2,
    });
  }

  function loginConfirm() {
    loginPopup._value.closePopup();
    // #ifdef MP-WEIXIN
    sheep.$router.go('/pages/login/wechat_login');
    // #endif
    // #ifndef MP-WEIXIN
    sheep.$router.go('/pages/login/phoneLogin');
    // #endif
  }

  function agreeToJoinGenealogy() {
    currentMode.mode = 'genealogy';
  }
</script>

<style lang="scss" scoped>
  .genealogy_list {
    width: 702rpx;

    .genealogy_posters {
      width: 702rpx;
      height: 338rpx;
      background: #234B7C;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      //padding: 20rpx 20rpx 18rpx 20rpx;
      position: relative;

      .genealogy_posters_image {
        width: 658rpx;
        height: 270rpx;
        position: absolute;
        top: 0;
        left: 0;
      }

      .genealogy_posters_images {
        width: 329rpx;
        height: 219rpx;
      }

      .genealogy_posters_info {

        .genealogy_posters_info_name {
          max-width: 350rpx;

          .genealogy_posters_info_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 36rpx;
            color: #FFFFFF;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .genealogy_posters_info_createdBy {
          .genealogy_posters_info_createdBy_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.85);
          }
        }

        .genealogy_posters_info_time {
          .genealogy_posters_info_time_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }

      .genealogy_posters_line {
        position: absolute;
        left: 170rpx;
        top: 180rpx;
        z-index: 10;
        width: 58rpx;
        height: 7rpx;
        border-radius: 12rpx;
      }
    }
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>